<template>
  <div class="option_box">
    <!-- 点赞 -->
    <div class="option_item like" @click="changeIsLike(IsLike, articleid)">
      <Badge
        :count="parseInt(Likes)"
        overflow-count="999"
        type="primary"
        :show-zero="true"
        :offset="[5, -10]"
        :class="{ like_actived: !!IsLike }"
      >
        <i class="iconfont icon-like-active-" :class="{ like_actived: !!IsLike }"></i>
      </Badge>
    </div>

    <!-- 评论 -->
    <div class="option_item comments">
      <Badge
        :count="parseInt(comments)"
        overflow-count="999"
        type="normal"
        :show-zero="true"
        :offset="[5, -10]"
      >
        <i class="iconfont icon-pinglun1"></i>
      </Badge>
    </div>
    <!-- 收藏 -->
    <Dropdown trigger="click" placement="bottom-start">
      <div class="option_item favorite" @click="changeFavorite(articleid)">
        <i class="iconfont icon-star" :class="{ favorite_actived: !!IsFavorite }"></i>
      </div>
      <Card
        :bordered="false"
        :dis-hover="true"
        slot="list"
        class="favorite_box"
        v-if="showFavoriteBox"
      >
        <p slot="title" class="title">添加到收藏夹</p>

        <ul class="favorite_items" v-if="!getListErr">
          <li
            class="list_item"
            v-for="(item,index) in this.favoriteList"
            @click="favoriteIt(item.favoriteId,articleid,item.isIn,index)"
          >
            <span>{{item.favoriteName}}</span>
            <i class="iconfont icon-success" :class="{ collect_actived: !!item.isIn }"></i>
          </li>
        </ul>
        <div class="add_favorites" v-if="!getListErr">
          <span class="show_ipt" v-if="this.showAddFolderBtn" @click.stop="changeIpt">新建收藏夹</span>

          <div class="iptFolderName" v-if="!this.showAddFolderBtn">
            <input
              class="foldername"
              placeholder="请输入收藏夹名称"
              v-model="foldername"
              maxlength="20"
              autofocus
              ref="focus"
              v-focus
              type="text"
            />
            <Button :disabled="!foldername" @click="addFolderAndCollect(articleid,foldername)">添加</Button>
          </div>
        </div>
        <p class="err" v-if="getListErr">获取失败</p>
      </Card>
    </Dropdown>
  </div>
</template>

<script>
export default {
  name: "ArticleOption",

  data() {
    return {
      // 是否已点赞该文章
      IsLike: "",
      // 是否已收藏该文章
      IsFavorite: "",
      // 文章点赞总人数
      Likes: "",
      // 请求收藏夹列表结果
      getListErr: false,
      showFavoriteBox: false,
      // 收藏夹列表
      favoriteList: [],
      // 防止高频触发
      loading: false,
      //显示新建收藏夹按钮
      showAddFolderBtn: false,
      // 禁用新建发送按钮
      disabled: true,
      // 新建文件夹名称
      foldername: ""
    };
  },

  props: {
    // 是否已点赞该文章
    islike: {},
    // 文章点赞总数
    likes: {},
    // 文章总评论数
    comments: {},
    // 是否收藏
    isfavorite: {},
    // 文章id
    articleid: {}
  },
  watch: {
    islike(val) {
      this.IsLike = val;
    },
    isfavorite(val) {
      this.IsFavorite = val;
    },
    likes(val) {
      this.Likes = val;
    }
  },
  computed: {},
  methods: {
    //点赞或取消点赞
    changeIsLike(islike, articleid) {
      //点赞或取消点赞前先判断用户是否登录
      let isLogin = this.$store.state.isAuthenticated;
      let uid = this.$store.state.user.uid;
      // 若未登录则要求登录
      if (isLogin) {
        if (!this.loading) {
          let action;
          // islike = 0 未点赞
          // islike = 1 已点赞
          if (!!islike) {
            action = "/unlike";
          } else {
            action = "/like";
          }
          this.$axios
            .get(action, {
              params: {
                uid: uid,
                articleid: articleid
              }
            })
            .then(res => {
              // 取消点赞图标激活类
              this.IsLike = !this.IsLike;
              if (!islike) {
                this.Likes = this.Likes + 1;
              } else {
                this.Likes = this.Likes - 1;
              }
              this.loading = false;
            })
            .catch(err => {
              this.$Message.error({
                background: true,
                content: "操作失败",
                duration: 2.5
              });
            });
        } else {
          return;
        }
      } else {
        // 弹出登录框
        this.$store.dispatch("setIsToLogin", true);
      }
    },
    // 获取收藏夹列表
    changeFavorite(articleid) {
      this.showAddFolderBtn = true;
      //收藏或取消收藏前先判断用户是否登录
      let isLogin = this.$store.state.isAuthenticated;
      let uid = this.$store.state.user.uid;
      if (isLogin) {
        if (!this.loading) {
          this.loading = true;
          this.showFavoriteBox = true;
          this.$axios
            .get("/getFavoriteList", {
              params: {
                uid: uid,
                articleid: articleid
              }
            })
            .then(res => {
              this.favoriteList = res.data.data.reverse();
              this.loading = false;
            })
            .catch(err => {
              this.loading = false;
              this.$Message.error({
                background: true,
                content: "获取失败",
                duration: 2.5
              });
            });
        } else {
          return;
        }
      } else {
        // 弹出登录框
        this.$store.dispatch("setIsToLogin", true);
      }
    },

    // 点击收藏文章到此收藏夹中
    favoriteIt(favoriteid, articleid, isin, index) {
      if (!this.loading) {
        this.loading = true;
        // isin = 0 此收藏夹未收藏
        // isin = 1 此收藏夹已收藏
        let uid = this.$store.state.user.uid;
        let action;
        if (!isin) {
          action = "/collection";
        } else {
          action = "/cancelCollection";
        }
        console.log(action);

        this.$axios
          .get(action, {
            params: {
              uid: uid,
              articleid: articleid,
              favoriteid: favoriteid
            }
          })
          .then(res => {
            this.favoriteList[index].isIn = !this.favoriteList[index].isIn;
            if (!res.data.isIn) {
              this.IsFavorite = 0;
            } else {
              this.IsFavorite = 1;
            }
            this.loading = false;
          })
          .catch(err => {
            console.log(err);
          });
      } else {
        return false;
      }
    },

    // 展示添加输入收藏夹名称
    changeIpt() {
      this.showAddFolderBtn = !this.showAddFolderBtn;
      this.foldername = "";
    },

    // 新建收藏夹，并将此文章收藏到该文件夹
    addFolderAndCollect(articleid, foldername) {
      let uid = this.$store.state.user.uid;
      // 随机生成图片地址
      let num = Math.floor(Math.random() * 20 + 1);
      let favoritesImage = "http://s2.lixiade.top/favoritesImg/" + num + ".jpg";
      this.$axios
        .post("/addFolder", {
          uid: uid,
          articleid: this.articleid,
          foldername: this.foldername,
          favoritesImage: favoritesImage
        })
        .then(res => {
          if (res.data.code == 0) {
            // 操作成功
            this.foldername = "";
            this.IsFavorite = 1;
            this.changeFavorite(this.articleid);
          } else {
            this.$Message.error({
              background: true,
              content: "新建收藏夹失败",
              duration: 2.5
            });
          }
        })
        .catch(err => {
          console.log(err.response);
          this.$Message.error({
            background: true,
            content: "请求失败，请重试",
            duration: 2.5
          });
        });
    }
  },

  // 添加input自动获取焦点的自定义指令 v-focus
  directives: {
    focus: {
      // 指令的定义
      inserted: function(el) {
        el.focus();
      }
    }
  },
  mounted() {}
};
</script>

 

<style lang="scss" >
.option_box {
  position: fixed;
  display: block;
  margin-left: -7rem;
  top: 20rem;
  .option_item {
    background-color: #fff;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.04);
    height: 40px;
    width: 40px;
    border-radius: 50%;
    text-align: center;
    margin-bottom: 1rem;
    cursor: pointer;
    .iconfont {
      color: #909090;
      line-height: 40px;
      font-size: 22px;
    }

    .ivu-badge-count {
      height: 16px;
      line-height: 14px;
    }
    // 点赞激活类
    .like_actived {
      color: #19be6b;
    }
    // 收藏激活类
    .favorite_actived {
      color: #ffaf36;
    }
    // .ivu-badge_actived {
    //   color: #19be6b;
    // }
  }
  .ivu-dropdown {
    .ivu-select-dropdown {
      top: 110px !important;
      left: 50px !important;
      .favorite_box {
        width: 20rem;
        // height: 13rem;
        .title {
          font-size: 1.1rem;
          font-weight: 700;
          text-align: center;
        }
        .ivu-card-body {
          padding: 0;
          .favorite_items {
            height: 7rem;
            overflow-y: auto;

            .list_item {
              display: flex;
              justify-content: space-between;

              padding: 0.4rem 1rem;
              cursor: pointer;

              //收藏夹收录文章激活类
              .collect_actived {
                color: #19be6b;
              }
            }
            .list_item:hover {
              background-color: #ddd;
            }
          }
          .add_favorites {
            padding: 0.8rem 1rem;
            border-top: 1px solid #eee;
            .show_ipt {
              cursor: pointer;
              color: #d2d2d2;
            }
            .show_ipt:hover {
              color: #2ecc71;
            }
            .iptFolderName {
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: space-between;
              .foldername {
                border: none;
                outline: none;
              }
            }
          }
        }

        .err {
          text-align: center;
          padding: 3rem;
          font-weight: 700;
        }
        .ivu-card-head {
          padding: 10px 16px;
        }
      }
    }
  }
}
</style>
